<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			. {
				margin: 0 auto;
				padding: 0;
			}

			.wrap {
				margin: 0 auto;
				width: 1270px;
				height: 2260px;
				background-image: url(images/history_start.png);
				background-repeat: no-repeat;
				background-position: top;
				transition: width 2s, height 4s, background-color 3s;
			}

			.left,
			.right {
				float: left;
				width: 570px;
				height: 2260px;
			}

			.mid {
				float: left;
				width: 130px;
				height: 2050px;
				margin-top: 120px;
				overflow: hidden;
				transition: 2s;
			}

			.mid:hover {
				height: 100px;
			}


			.left {
				margin-top: 365px;
			}

			.right {
				margin-top: 280px;
			}

			.left-zg {
				float: right;
				margin-bottom: 95px;
			}

			.right-zg {
				float: left;
				margin-bottom: 95px;
			}

			.lpt {
				float: right;
				color: red;
				font-size: 23px;
				font-weight: bold;
				margin-top: 10px;
			}

			.ltime {
				text-align: center;
				width: 60px;
				height: 70px;
				float: right;
				line-height: 26px;
				background-image: url(images/sprites.png);
				background-position: -180px -1200px;
				padding-right: 25px;
				color: white;
			}

			.ltxt {
				width: 200px;
				height: 70px;
				float: right;
				line-height: 28px;
				background-image: url(images/sprites.png);
				background-position: -37px -1200px;
				color: white;
				padding-left: 5px;
			}

			.rpt {
				float: left;
				color: red;
				font-size: 23px;
				font-weight: bold;
				margin-top: 10px;
			}

			.rtime {
				text-align: center;
				width: 60px;
				height: 70px;
				float: left;
				line-height: 26px;
				background-image: url(images/sprites.png);
				background-position: 0px -1300px;
				padding-left: 25px;
				color: white;
			}

			.rtxt {
				width: 200px;
				height: 70px;
				float: left;
				line-height: 28px;
				background-image: url(images/sprites.png);
				background-position: -23px -1300px;
				color: white;
				padding-left: 5px;
			}

			.lpt:hover {
				transform: rotate(360deg);
				color: green;
				transition: 0.5s;
			}

			.rpt:hover {
				transform: skew(30deg);
				color: blue;
				font-size: 50px;
				transition: 0.5s;
			}

			.ltime:hover {
				transform: translate(100px, -100px);
				transition: 1s;
			}

			.ltxt:hover {
				transform: translate(-200px) rotate(1800deg);
				color: green;
				transition: 1s;
			}
			.rtime:hover{
				transform: skewx(-20deg) rotate(720deg);
				transition: 0.5s;
			}
			.right-zg:nth-child(1):hover .rtxt,	
			.right-zg:nth-child(2):hover .rtxt{
				transform: translate(200px, 100px);
				transition: 0.5s;
			}
			.right-zg:nth-child(3):hover .rtxt,
			.right-zg:nth-child(4):hover .rtxt{
				transform: translate(200px) rotate(180deg);
				transition: 0.5s;
			}
			.right-zg:nth-child(5):hover .rtxt{
				transform: translateX(200px);
				transition: 0.5s;
			}
			.right-zg:nth-child(6):hover .rtxt{
				transform: translateY(200px);
				transition: 0.5s;
			}
			.right-zg:nth-child(7):hover .rtxt{
				transform: skew(30deg, 20deg);
				color: black;
				transition: transform 1s,color 7s;
			}
			.right-zg:nth-child(8):hover .rtxt{
				transform: skew(30deg);
				transition: 0.5s;
			}
			.right-zg:nth-child(9):hover .rtxt{
				transform: skewX(30deg);
				transition: 0.5s;
			}
			.right-zg:nth-child(10):hover .rtxt{
				transform: skewY(30deg);
				transition: 0.5s;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">
				<div class="left-zg">
					<span class="lpt">中共二大</span>
					<span class="ltime">1922年7月</span>
					<span class="ltxt">制定了党的最高纲领和最低纲领</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共四大</span>
					<span class="ltime">1925年1月</span>
					<span class="ltxt">在中国近代史上第一次明确地提出了彻底的反帝反封建</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共六大</span>
					<span class="ltime">1928年6月</span>
					<span class="ltxt">大会通过了关于政治、军事、组织、苏维埃政权、农</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共八大</span>
					<span class="ltime">1956年9月</span>
					<span class="ltxt">确定把党的工作重点转向社会主义建设</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共十大</span>
					<span class="ltime">1973年8月</span>
					<span class="ltxt">大会通过了政治报告、关于修改党章的报告和《中国共</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共十二大</span>
					<span class="ltime">1982年9月</span>
					<span class="ltxt">邓小平第一次提出了“建设有中国特色的社会主义”的</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共十四大</span>
					<span class="ltime">1992年10月</span>
					<span class="ltxt">进一步解放思想，把握有利时机</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共十六大</span>
					<span class="ltime">2002年11月</span>
					<span class="ltxt">全面建设小康社会，加快推进社会主义现代化</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共十八大</span>
					<span class="ltime">2012年11月</span>
					<span class="ltxt">明确了科学发展观是党必须长期坚持的指导思想，并写</span>
				</div>
				<div class="left-zg">
					<span class="lpt">中共二十大</span>
					<span class="ltime">2022年10月</span>
					<span class="ltxt">即将开幕</span>
				</div>
			</div>


			<div class="mid">
				<img src="images/history.png">
			</div>

			<div class="right">
				<div class="right-zg">
					<span class="rpt">中共一大</span>
					<span class="rtime">1921年7月</span>
					<span class="rtxt">第一次全国代表大会宣告了中国共产党的正式成立</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共三大</span>
					<span class="rtime">1923年6月</span>
					<span class="rtxt">建立革命统一战线</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共五大</span>
					<span class="rtime">1927年4月</span>
					<span class="rtxt">第一次全国代表大会宣告了中国共产党的正式成立</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共七大</span>
					<span class="rtime">1945年4月</span>
					<span class="rtxt">通过新的党章，确定以马克思列宁主义与中国革命实践</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共九大</span>
					<span class="rtime">1969年4月</span>
					<span class="rtxt">大会通过了政治报告和党章修正草案</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共十一大</span>
					<span class="rtime">1977年8月</span>
					<span class="rtxt">在揭批江青集团进一步深入，各方面工作得以恢复和</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共十三大</span>
					<span class="rtime">1987年10月</span>
					<span class="rtxt">系统阐述了关于社会主义初级阶段的理论，提出了党在</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共十五大</span>
					<span class="rtime">1997年9月</span>
					<span class="rtxt">高举邓小平理论伟大旗帜，把建设有中国特色社会主义</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共十七大</span>
					<span class="rtime">2007年10月</span>
					<span class="rtxt">深入贯彻落实科学发展观,继续解放思想，坚持改革开</span>
				</div>
				<div class="right-zg">
					<span class="rpt">中共十九大</span>
					<span class="rtime">2017年10月</span>
					<span class="rtxt">不忘初心牢记使命，高举中国特色社会主义伟大旗帜，</span>
				</div>
			</div>
		</div>
	</body>
</html>
